<template>
  <div>
    <el-upload
        class="avatar-uploader"
        action="#"
        accept="image/*"
        :file-list="fileList"
        list-type="picture-card"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :limit="limit"
        :http-request="onChangeFile"
        :before-upload="beforeAvatarUpload">
        <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
        <i class="el-icon-plus avatar-uploader-icon"></i> 
      </el-upload>
  </div>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import { generateMixed } from '@/utils/index'
import store from '@/store'
export default {
  name:'VabQiniuUpload',
    props: {
    limit:{
       type: Number,
      default: ''
    }
  },
  setup(props, { emit }) {
    watch(() => props, (newVal) => {
      query.imageUrl = newVal;
    })
    const Interface = reactive({
      loadImg(array){
        this.fileList = []
        let result = []
        array && array.forEach(element => {
          let params = {}
          params.name = ''
          params.url = element
          result.push(params)
        });
        this.fileList = result
      },
      handleRemove(file, fileList){
        query.fileList.filter((item,index) => {
          if (item.url == file.url) {
            query.fileList.splice(index, 1);
            emit('nextOk',item.url)
          }
        });
      },
      beforeRemove(file,fileList){
        return MessageBox.confirm(`确定移除 ${ file.name }？`);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          Message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          Message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      async onChangeFile(file){
        const observer = {
            next(res){
              
            },
            error(err){
                console.log(err)
            },
            complete(res){
              // 构建文件的可访问路径
              const fileUrl = `https://wormhole.icu/`+res.key;
              let params = {}
              params.name = file.file.name
              params.url = fileUrl
              query.fileList.push(params)
              emit('onOk',fileUrl)
            }
        }
       
        const observable = qiniu.upload(file.file, null, query.qiniuToken, {}, {})
        observable.subscribe(observer)
      },
    })
    const query = reactive({
      qiniuToken:computed(()=>{return store.getters['baseStore/qiniuToken']}),
      imageUrl:'',
      fileList:[]
    })
    return {
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>